import { defineStore } from 'pinia'
import { store } from '@/store/index'

interface Variable {
  tabsFlag: boolean;
  layout: string;
}

export const useVariableStore = defineStore('variable', {
  state: (): Variable => {
    return {
      tabsFlag: localStorage.getItem('tabsFlag') ? localStorage.getItem('tabsFlag') === 'true' : true, // 如果存在tabsFlag，则判断tabsFlag中的值，否则显示tab栏
      layout: localStorage.getItem('layoutStyle') ? localStorage.getItem('layoutStyle') as string : 'left' // left: 左侧菜单模式；top：顶部菜单模式；screen：大屏模式
    }
  },
  getters: {}, // 可以将计算属性放在 getters 中使用，以便其在状态变化时产生
  actions: {
    setTabsFlag () {
      this.tabsFlag = !this.tabsFlag
      localStorage.setItem('tabsFlag', this.tabsFlag.toString())
    },
    setLayoutStyle (value: string) {
      this.layout = value
      localStorage.setItem('layoutStyle', value)
    }
  }
})

export function useVariableStoreWithOut () {
  return useVariableStore(store)
}
